<template>
	<div class="item-box alljz_com">
		<dv-border-box-8 style="height: 100%;width: 90%;">
			<div class="full_com alljz_com">
				<div class="img-box" style="position: relative;" @click="tiaozhuan(item.url)">
					<img :src="item.fmImg" alt="" class="full_com img-item">
					<div class="system-title-box">
						{{item.title}}
						<div class="chaochu alljz_com">
							<span class="enter-box">点 击 进 入</span>
						</div>
					</div>
				</div>
			</div>
		</dv-border-box-8>
	</div>
</template>

<script>
	export default {
		props: {
			item: {
				type: Object,
				default: () => {
					return {}
				}
			}
		},
		methods: {
			tiaozhuan(url) {
				window.open(url, '_blank');
			}
		}
	}
</script>

<style scoped>
	.item-box {
		width: 25%;
		height: calc(2700 / 16 * 1px);
	}

	.system-title-box {
		position: absolute;
		bottom: 0;
		left: 0;
		width: calc(100%);
		height: 30px;
		line-height: 30px;
		background-image: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
		color: #fff;
		padding: 0 5px;
		text-align: center;
		font-size: 13px;
		transition: all .3s;
	}

	.img-box {
		width: calc(100% - 10px);
		height: calc(100% - 10px);
		cursor: pointer;
		border-radius: 5px;
		overflow: hidden;
	}

	.img-box:hover .system-title-box {
		height: 100%;
		background-color: rgba(103, 172, 255, 0.5);
		background-image: none;
		font-size: 18px;
		font-weight: bold;
	}

	.chaochu {
		width: 100%;
		height: calc(2700 / 16 * 0.9 * 1px - 30px);
		font-size: 20px;
	}
</style>
